<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="waterfull J_waterfull">
      <div class="waterfull-item">
        <img
          src="https://img1.baidu.com/it/u=3371814282,534000835&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="waterfull-item">
        <img src="img/3.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img
          src="https://img1.baidu.com/it/u=3371814282,534000835&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="waterfull-item">
        <img
          src="https://img1.baidu.com/it/u=3371814282,534000835&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="waterfull-item">
        <img src="img/3.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img src="img/3.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img src="img/4.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img
          src="https://img1.baidu.com/it/u=3371814282,534000835&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="waterfull-item">
        <img src="img/3.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img src="img/4.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img
          src="https://img1.baidu.com/it/u=3371814282,534000835&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="waterfull-item">
        <img src="img/1.jpeg" alt="" class="waterfull-item-img" />
      </div>
      <div class="waterfull-item">
        <img src="img/2.jpeg" alt="" class="waterfull-item-img" />
      </div>
    </div>
  </body>
  <script src="./waterfull.js"></script>
  <script>
    // 设置延时的原因是：网络地址加载的img元素，最开始不能得到父级元素的宽和高
    // 需要等待页面元素记载完成之后才会得到
    setTimeout(() => {
      let waterfull = new Waterfull({
        el: "J_waterfull",
        column: 4,
        gap: 1,
      });
    }, 1000);
  </script>
  <style>
    .waterfull {
      /* 瀑布流最外层父级容器 */
      width: 1200px;
      margin: 0 auto;
      position: relative;
      columns: 4;
      column-gap: 1px;
    }
    .waterfull-item {
      /* 设置item元素为绝对定位，js设置其位置 */
      position: absolute;
    }
    .waterfull-item img {
      /* 瀑布流图片 */
      width: 100%;
      height: 100%;
    }
  </style>
</html>
